<template>
    <div class="article-list">
      <van-pull-refresh
        v-model="refreshing"
        @refresh="getNextPageArticles"
        success-text="刷新成功"
      >
        <van-list
          @load="getNextPageArticles"
          :immediate-check="false"
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          :error.sync="error"
          error-text="请求失败，点击重新加载"
        >
          <Article
            v-for="item in articles"
            :key="item.art_id"
            :article-info="item"
          ></Article>
        </van-list>
      </van-pull-refresh>
    </div>
  </template>
  
  <script>
  import { getArticlesAPI } from '@/api'
  import Article from '@/views/Home/components/Article'
  export default {
    props: ['channelId'],
    components: {
      Article
    },
    created() {
      this.getFirstArticles()
    },
    data() {
      return {
        articles: [],
        loading: false,
        tamp: '',
        finished: false,
        refreshing: false,
        error: false
      }
    },
    methods: {
      async getFirstArticles() {
        try {
          const { data } = await getArticlesAPI(this.channelId, +new Date())
          this.articles = data.data.results
          this.tamp = data.data.pre_timestamp
          //    console.log(data);
        } catch (error) {
          if (error.response?.status === 400) {
            this.$toast.fail(error.response.data.message)
          } else {
            throw error
          }
        }
      },
      async getNextPageArticles() {
        try {
          const { data } = await getArticlesAPI(this.channelId, this.tamp)
          // console.log(data);
          if (this.loading) {
            this.articles.push(...data.data.results)
          } else {
            this.articles.unshift(...data.data.results)
          }
          this.tamp = data.data.pre_timestamp
          if (!this.tamp) {
            this.loading = true
            this.finished = true
          }
        } catch (error) {
          this.error = true
        } finally {
          this.loading = false
          this.refreshing = false
        }
      },
      getDetail(a) {
        console.log(a)
      }
    }
  }
  </script>
  
  <style scoped lang="less">
  .article-list {
    height: calc(100vh - 92px - 83px - 100px);
    overflow: auto;
  }
  &::-webkit-scrollbar {
    width: 30px;
    background-color: transparent;
  }
  &::-webkit-scrollbar-thumb {
    background-color: #3296fa;
    border-radius: 20px;
  }
  </style>